<template>
    <div class="voluteerActivity">
        <VHeader title='团队活动' />
        <van-tabs
            v-model="tabActive" 
            background='#fff'
            title-active-color='#F65D5D'
            line-height='1'
            sticky
            @change='changeTabs'
            >
            <van-tab v-for='(el,index) in tabBar' :key='index' :title="el.title">
               
            </van-tab>
             
        </van-tabs>
        <div class="search-wrap">
           <!-- <van-search placeholder="" v-model="searchValue" show-action>
                <div slot='action' class='search'>搜索</div>
            </van-search>-->
        </div>
        
        <div class="list-wrap">
            <van-list
                v-model="listLoadingFlag"
                v-if="list.length > 0"
                :finished="listLoadingFinished"
                @load="getData"
                :immediate-check='false'
            >
                <div v-for="(el,index) in list" :key="index">
                    <activityItem :activityData='el'/>
                </div>
            </van-list>
            <div v-else class="flex flex-center flex-align-center no-more">
                <div>
                    <img src="../../../static/img/no_data.png" width="150" />
                    <p style="text-align: center">没有更多数据</p>
                </div>
            </div>
        </div>
        
    </div>
</template>

<script>
import activityItem from './myTeamActivityItem'
export default {
    data() {
        return {
            tabActive:0,
            tabBar:[
                {title:'未结束活动'},
                {title:'已结束活动'},
            ],
            listLoadingFlag:false,
            listLoadingFinished:false,
            loadingFlag:true,
            searchValue:'',
            pageSize:10,
            page:1,
            list:[]

        }
    },
    components:{
        activityItem,
    },
    created() {
        this.getData()
    },
    methods: {
        listLoadingOnLoad(){

        },
        async getData(flag){
            if(!this.loadingFlag){return}
            this.listLoadingFlag = false;
            this.loadingFlag=false
            let res=await this.$http({
                method:'api.team.activity',
                page:this.page++,
                pageSize:this.pageSize,
                status:this.tabActive
            })
            this.list=flag?res.data.list:[...res.data.list,...this.list]
            this.listLoadingFinished=(res.data.list.length<this.pageSize)
            this.loadingFlag=true
        },
        changeTabs(){
            this.page=1;
            this.getData(true)
        }
    },
}
</script>

<style lang='scss' scoped >
.search{color: #F65D5D;}
.search-wrap{margin:.5rem 0;}
.list-wrap{padding: 0 .4rem}
.voluteerActivity{padding-bottom: 50px;}
</style>